import './App.css'
import { Suspense, useEffect } from 'react'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import routes from './router/index'
import Loading from './components/Loading/index'

const Auth = ({ children }) => {
  const location = useLocation()
  const navigator = useNavigate()
  useEffect(() => {
    if (location.pathname === '/login') {
      navigator('/login')
    }
  }, [location.pathname])
  return children
}
function App() {
  const element = useRoutes(routes)
  return (
    <Suspense fallback={<Loading />}>
      <Auth> {element}</Auth>
    </Suspense>
  )
}

export default App
